<template>
  <el-popover
    ref="popoverRef"
    placement="bottom"
    width="296"
    trigger="click"
    @after-leave="afterLeave"
  >
    <el-input
      v-model="searchColumn"
      placeholder="请输入内容"
      prefix-icon="el-icon-search"
    />
    <div class="switchList">
      <draggable v-model="columnList" :move="onMove" @start="onStart"
                 @end="onEnd">
        <div v-for="(item,index) in columnList" :key="index" class="switchItem">
          <div>
            <svg-icon icon-class="menu-sort" class="icon" />
            <span>{{ item.columnName }}</span>
          </div>
          <el-switch v-model="item.developerShow" @change="changeColumnValue($event,item)" />
        </div>
      </draggable>
    </div>
    <div class="btnbox">
      <el-button size="small" style="width: 124px;" @click="selectedAll">全部显示</el-button>
      <el-button size="small" style="width: 124px;" @click="cancelAll">全部隐藏</el-button>
    </div>
    <el-button slot="reference" icon="el-icon-c-scale-to-original" type="text"
               @click="getcolumnList">列显示</el-button>
  </el-popover>
</template>
<script>
import draggable from 'vuedraggable'
import { columnList, listShowSetting } from '@/framework/api/developerCenter/formDesignData'

export default {
  components: {
    draggable
  },
  props: {
    title: {
      type: String,
      default: '列设置'
    },
    value: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      columnList: [],
      searchColumn: ''
    }
  },
  watch: {
    $route: {
      handler(newVal) {
        this.$refs.popoverRef.doClose()
        this.formId = newVal.query.formId
      },
      immediate: true
    },
    searchColumn(newVal, oldVal) {
      if (newVal) {
        this.$nextTick(() => {
          this.columnList = this.columnList.filter((item) => {
            return item.columnName.includes(newVal)
          })
        })
      } else {
        this.columnList = [...this.list]
      }
    }
  },
  created() {
    this.formId = this.$route.query.formId
  },
  methods: {
    afterLeave() {
      this.searchColumn = ''
    },
    getcolumnList() {
      // formId=1726429073015701506&formCode=9oeurzj4&formName=m设计1
      // columnSettingType返回设置类型，0-全部设置、1-列表设置、2-搜索框设置、3-列表及搜索框设置-排序设置
      columnList({ formId: this.formId, columnSettingType: 1 }).then((res) => {
        this.list = res.data
        this.columnList = [...this.list]
      })
    },
    onMove() {
    },
    onStart() {
    },
    onEnd() {
      // 改后的list 通过修改接口，获取最新的json
      this.getListShowSetting()
    },
    getListShowSetting() {
      // 改后的list 通过修改接口，获取最新的json
      // 接口成功后 修改页面状态，获取新json
      listShowSetting({ formId: this.formId, columnShowList: this.columnList }).then((res) => {
        // this.$emit('changeDefaltCol', JSON.parse(res.data.defaultColumnContent))
        const newJson = JSON.parse(res.data.formContent)
        this.$emit('changeTable', newJson)
        this.getcolumnList()
      }).catch(() => {
        this.getcolumnList()
      })
    },
    changeColumnValue(developerShow, item) {
      this.getListShowSetting()
    },
    // 全部显示
    selectedAll() {
      // 设置状态，修改接口
      this.columnList.forEach((item) => {
        this.$set(item, 'developerShow', true)
      })
      this.getListShowSetting()
    },
    // 全部隐藏
    cancelAll() {
      this.columnList.forEach((item) => {
        this.$set(item, 'developerShow', false)
      })
      // 接口
      this.getListShowSetting()
    }
  }
}
</script>
<style lang="scss" scoped>
.switchList{
  display: flex;
  flex-direction: column;
  margin: 20px 0 0;
  .switchItem{
    cursor: pointer;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
  }
}
.btnbox{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.el-button--text{
    color: #333;
  }
.el-button--text:hover{
  color:var(--themeColor);
}
::v-deep .el-popover{
  max-height: 400px!important;
}
</style>
